<template>
  <div>
    <h2 style="text-align: center;">用户查看借款页展示</h2>

    <table class="table table-bordered">
      <thead>
        <tr>
          <td>借款ID</td>
          <td>借款名称</td>
          <td>借款最高金额</td>
          <td>借款年限</td>
          <td>利息</td>
          <td>借款简介</td>
          <td>借款发布时间</td>
        </tr>
      </thead>
      <tbody v-for="em in info" :key="em.xid">
        <tr>
          <td>{{ em.xid }}</td>
          <td>{{ em.xname }}</td>
          <td>{{ em.maxprice }}</td>
          <td>{{ em.maxyear }}</td>
          <td>{{ em.lixi }}</td>
          <td>{{ em.xshow }}</td>
          <td>{{ em.xdate.substring(0,10) }}</td>
          <td><input type="button" value="去还款" @click="huankuan(em.xid)"></td>
        </tr>
      </tbody>
    </table>
    一共<span>{{ chaxun.totalcount }}</span>条数据
    一共<span>{{ chaxun.pagecount }}</span>页
    当前第<span>{{ chaxun.pageindex }}</span>页
    每页显示<span>{{ chaxun.pagesize }}</span>条
      <input type="button" value="首页" @click="A">
      <input type="button" value="上一页" @click="B">
      <input type="button" value="下一页" @click="C">
      <input type="button" value="尾页" @click="D">
      <select v-model="chaxun.pagesize" @change="dd">
    <option value="3">3条/页</option>
    <option value="4">4条/页</option>
    <option value="5">5条/页</option>
    <option value="6">6条/页</option>
  </select>
  <input type="text" v-model="chaxun.pageindex">
  <input type="button" value="跳转" @click="page(chaxun.pageindex)">
  </div>

</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import axios from 'axios';
import {useRouter} from 'vue-router';
let router=useRouter();
const info=ref([{
  xid:0,
  xname:"",
  maxprice:"",
  maxyear:"",
  lixi:"",
  xshow:"",
  xdate:"",
}])
const chaxun=ref({

  pageindex:1,
  pagesize:2,
  pagecount:0,
  totalcount:0,
})

//分页
const page=(i:any)=>{
if(i>=1 && i<=chaxun.value.pagecount)
{
  chaxun.value.pageindex=i;
  xian();
}
}
const dd=()=>{
  chaxun.value.pageindex=1;
  xian();
}
//生命周期
onMounted(()=>{
  xian();
})
//跳转
const A=()=>{
 router.push("/UsershowView");
}
const B=()=>{
 router.push("/UsershowView");
}
const C=()=>{
  router.push("/Usershow1View");
}
const D=()=>{
  router.push("/Usershow2View");
}
//显示函数
const xian=()=>{
  axios({
    url:"http://localhost:8322/api/User/userjiekuanshow",
    method:"get",
    params:info.value
  }).then((res)=>{
    info.value=res.data.b;
    chaxun.value.pagecount=res.data.pagecount;
    chaxun.value.totalcount=res.data.totalcount;
    console.log(res.data);

  }).catch((err)=>{
    console.log(err);
  })
}

//查询
const xian1=()=>{
  xian();
}
//插槽技术
//还款
const huankuan=(xid:any)=>{
  router.push({
    name:"HuankuanView",
    params:{
      xid:xid,
    }

  })
}


</script>

<style scoped>

</style>